<template>
  <div class="msg-list">
    <q-list dense padding>
      <q-intersection
        v-for="u in users"
        :key="u.id"
        transition="scale"
        class="example-item"
        :class="active === u.id && 'active-item'"
      >
        <info-card
          :id="u.id"
          :avatar="u.avatar"
          :remark="u.remark"
          :email="u.email"
          @active="handleActive"
        />
      </q-intersection>
    </q-list>
  </div>
</template>

<script>
import { uid } from 'quasar';
import { InfoCard } from '@/components';

export default {
  name: 'MsgList',
  components: {
    'info-card': InfoCard,
  },
  data() {
    return {
      users: [
        {
          id: uid(),
          email: 'useryechen@gmail.com',
          nickname: 'kevin',
          remark: '本人',
          avatar: require('@/assets/avatar.jpg'),
          cityname: '陕西 西安',
          sex: 1,
          age: 19,
          number: 'useryechen',
        },
        {
          id: uid(),
          email: 'useryechen1@gmail.com',
          nickname: '一叶知秋',
          remark: '备注1',
          avatar: require('@/assets/avatar.jpg'),
          cityname: '山东 青岛',
          sex: 1,
          age: 19,
          number: 'useryechen1',
        },
        {
          id: uid(),
          email: 'useryechen2@gmail.com',
          nickname: 'null',
          remark: '备注2',
          avatar: require('@/assets/avatar.jpg'),
          cityname: '北京 朝阳',
          sex: 1,
          age: 19,
          number: 'useryechen2',
        },
      ],
      active: '',
    };
  },

  methods: {
    handleActive(id) {
      this.active = id;
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/styles/quasar.variables.scss';

.msg-list {
  .active-item {
    background: $active_bg;
  }
}
</style>
